body {
  margin: 0;
  padding: 0;
}

div {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

span {
  transition: transform 0.5s;
  display: inline-block;
}

.before:first-child {
  transform: translateX(10px);
}

.transformer:first-child {
  transform: translateX(calc(100vw - 100% - 10px));
}

.before:last-child {
  transform: translateX(-10px);
}

.transformer:last-child {
  transform: translateX(calc(-100vw + 100% + 10px));
}
/* 
布局html
<div>
<span class="before">左边111</span>
<span><<<>>></span>
<span class="before">右边2333</span>
</div>
<button>
  transform
</button>
*/
/* 
js     es6的写法，惊叹！！
  const button = document.querySelector('button');
  const spans = document.querySelectorAll('span');
  let onOff = false;
  button.addEventListener('click', (event) => {
    onOff = !onOff;
    [...spans].forEach(span => {
      span.className = onOff ? 'transformer' : 'before'
    });
  });
*/

/* ------------------------------------- */
/* 第二种方法 */
body {
  margin: 0;
  padding: 0;
}

div {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
div, span {
  transition: transform 0.5s;
}
span {
  display: inline-block;
}

.transformer {
  transform: rotateY(180deg);
}

/* 
布局 html
<div>
<span class="before">左边111</span>
<span class="before">右边2333</span>
</div>
<button>
  transform
</button>
*/


/* 
js es6
const button = document.querySelector('button');
const spans = document.querySelectorAll('span');
const div = document.querySelector('div');
let onOff = false;
button.addEventListener('click', (event) => {
	onOff = !onOff;
  div.className = onOff ? 'transformer' : 'before';
	[...spans].forEach(span => {
  	span.className = onOff ? 'transformer' : 'before'
  });
});
*/